<template>
	<view class="tomato-wrapper">
		<view class="tomato-note">
			<view>备注 ：</view>
			<input type="text" v-model='note' placeholder="请输入备注">
		</view>
		<view class="tomato-time">
			<view>时长 ：</view>
			<input type="text" v-model='time' placeholder="请输入分钟数">
		</view>
		<view class="tomato-button">
			<view class="bar"></view>
			<button @click="commitData">确定</button>
			<button class="close" @click='close'>取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				note: '',
				time: undefined,
			}
		},
		computed: {
			tomato() {
				return this.$store.state.moneyData.tomato
			}
		},
		inject: ['toggle', 'setToggle'],
		methods: {
			commitData() {
				let payload = {
					note: this.note,
					time: Number(this.time),
				}
				if (isNaN(payload.time) === true || (typeof payload.time) !== 'number') {
					uni.showToast({
						title: '时长只能为整数',
						icon: 'error'
					})
				} else {
					this.$store.commit('addTomato', payload)
					uni.showToast({
						title: '提交成功'
					})
					this.note = ''
					this.time = undefined
					this.setToggle()
				}

			},
			close() {
				this.setToggle()
			}
		}

	}
</script>

<style lang="scss">
	.tomato-wrapper {}

	.tomato-note,
	.tomato-time {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px;
		margin-top: 5px;

		>input {
			padding: 5px;
			border-radius: 5px;
			border: 1px solid #a1a0a0;
		}
	}

	.tomato-button {
		display: flex;
		padding: 10px;
		padding-right: 20px;

		>button {
			background: rgb(59, 85, 71);
			color: rgb(221, 216, 216);
			padding: 5px 15px;
			border-radius: 5px;
			border: 1px solid #a1a0a0;
			box-shadow: 1px 1px 2px 2px rgb(223, 220, 220);
		}

		>.bar {
			flex-grow: 1;
		}

		>.close {
			margin: 0px 20px;
			background: rgb(132, 134, 133);
		}
	}
</style>
